<template>
	<view class="content">
		<gui-page class="pages h5-padding" ref="guiPage">
			<!-- 自定义头部导航 -->
			<view slot="gHeader">
				<view class="gui-flex gui-nowrap gui-rows gui-align-items-center" style="padding-left:30rpx;">
					<view class="gui-text-center"
						style="width:300rpx; flex:1; padding:10rpx 20rpx; border-radius:80rpx; margin:0 25rpx;">

						<text class="gui-color-white gui-text">系统消息</text>
					</view>
				</view>

			</view>
			<!-- 页面主体 -->
			<view v-if="token" slot="gBody"
				class="gui-body gui-grids gui-flex gui-rows gui-wrap gui-margin-top gui-bg-gray demo-nav2">
				<gui-switch-navigation-news isCenter :items="tabs" :width="750" textAlign="center"
					activeDirection="center" :size="0" :currentIndex="currentIndex" @change="navchange" :margin="20"
					padding="30rpx" activeLineHeight="4rpx" lineHeight="72rpx" activeLineWidth="100rpx">
				</gui-switch-navigation-news>

				<swiper :current="currentIndex" @change="swiperChange"
					:style="{height:mainHeight+'px', width:'750rpx'}">
					<!-- 轮播项目数量对应 上面的选项标签 -->
					<swiper-item>
						<scroll-view scroll-y :style="{height:mainHeight+'px'}">
							<myList :list="getCurPageList" @click="onSysClick"></myList>
							<loadmore :moreObj="more" @load="onLoadmore"></loadmore>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y :style="{height:mainHeight+'px'}">
							<myList :list="getCurPageList" type="user" @click="onUserClick"></myList>
							<loadmore :moreObj="more" @load="onLoadmore"></loadmore>
						</scroll-view>
					</swiper-item>
				</swiper>


			</view>
		</gui-page>
		<Tabbar :current="1"></Tabbar>
	</view>
</template>
<script>
	import {
		sysEmUserMessageList,
		emUserMessageList,
		mySysUnreadMessageCount,
		myUnreadMessageCount,
		readSysMessage,
    emUserReadMessage
	} from '@/api/message'

	import pagiation from '@/mixins'
	import myList from './components/list'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		isLogins
	} from '@/utils/isLogin'
	export default {
		mixins: [pagiation],
		components: {
			myList
		},
		data() {
			return {
				// 选中选项的 索引
				currentIndex: 0,
				tabs: [], //tabs切换列表
			}
		},
		onLoad() {
			this.isUserToken()
		},

		onShow() {

		},
		computed: {
			...mapGetters(['token'])
		},
		methods: {
			async loadmore() {
				// 每次出发该方法，都要使页数加一
				this.pageNo++
				if (this.currentIndex === 0) {
					await this.getCurrentPageList(sysEmUserMessageList, {
						pageNo: this.pageNo
					})
				} else {
					await this.getCurrentPageList(emUserMessageList, {
						pageNo: this.pageNo
					})
				}
			},
			//如果有用户信息，就获取数据
			isUserToken() {
				if (this.token) {
					this.initGetRefs()
					this.init()
					this.emUserMessageList()
				} else {
					isLogins()
				}
			},
			//初始化
			init() {
				this.tabs = [{
					id: 0,
					name: '系统消息'
				}, {
					id: 1,
					name: '用户消息'
				}]
				this.mySysUnreadMessageCount()
				this.myUnreadMessageCount()
			},
			//进入系统文章详情
			onSysClick(item, index) {

				readSysMessage(item.id).then(res => {
					const {
						code
					} = res
					if (code === 200) {
						this.mySysUnreadMessageCount()
						this.getCurPageList[index].isRead = 1
					}
				}).catch(err => {
					console.log(err)
				})
				this.$u.route('/pages/informaterArticleDetails/informaterArticleDetails', {
					id: item.id,
				});

			},
			//用户消息详情
			onUserClick(item, index) {
        emUserReadMessage(item.id).then(res => {
					const {
						code
					} = res
					if (code === 200) {
						this.myUnreadMessageCount()
						this.getCurPageList[index].isRead = 1
					}
				}).catch(err => {
					console.log(err)
				})
				const {
					businessId,
					businessType
				} = item
				if (businessType === 1) {
					this.$navigateTo(`/pages/myEmploy/myEmploy?type=big&deliveryIndex=0`)
				}
			},
			//主体部分切换
			swiperChange({
				detail
			}) {

				const {
					current: index
				} = detail;
				this.currentIndex = index;
				this.onReset()
				this.emUserMessageList()
			},
			//未读系统消息
			mySysUnreadMessageCount() {
				this.messageCountSys(mySysUnreadMessageCount)
			},
			//我的未读消息
			myUnreadMessageCount() {
				this.messageCountSys(myUnreadMessageCount, 1)
			},
			messageCountSys(cb, index = 0) {
				cb().then(res => {
					const {
						code,
						result,
						success
					} = res
					this.tabs[index].name = `${index===0?'系统消息':index===1?'用户消息':''}(${result || 0})`
				}).catch(e => {
					console.log(e)
				})
			},
			//消息列表
			emUserMessageList() {
				if (this.currentIndex === 0) {
					this.getCurrentPageList(sysEmUserMessageList, {
						pageNo: this.pageNo
					})
				} else {
					this.getCurrentPageList(emUserMessageList, {
						pageNo: this.pageNo
					})
				}

			},
			//加载更多
			onLoadmore() {
				this.pageNo++
				if (this.currentIndex === 0) {
					this.getCurrentPageList(sysEmUserMessageList, {
						pageNo: this.pageNo,
						searchTitle: this.searchTitle
					})
				} else {
					this.getCurrentPageList(emUserMessageList, {
						pageNo: this.pageNo
					})
				}
			}
		}
	}
</script>
<style scope lang="scss">
	@import"@/style/body-pages"
</style>
